<template>
    <div class="table store sever_list">
        <div class="crumbs store_title">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> 门店</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="mainBtn">
            <el-button type="success" @click="addStore()"><i class="el-icon-plus"></i>添加门店</el-button>
        </div>
        <div class="container">
            <el-table v-if="activeShow" :data="list"  border style="width: 100%"  ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column prop="shopName" label="门店名称">
                </el-table-column>
                <el-table-column prop="shopAddress" label="门店地址">
                </el-table-column>
                <el-table-column prop="fettle" label="门店状态" >
                </el-table-column>
                <el-table-column prop="province" label="所在省">
                </el-table-column>
                <el-table-column prop="city" label="所在市" >
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.fettle === '营业'" size="small"  @click="statusFn(scope.$index, scope.row)">设为停业</el-button>
                        <el-button v-else size="small"  @click="statusFn(scope.$index, scope.row)">设为营业</el-button>
                        <el-button size="small" type="primary" @click="editFn(scope.$index, scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange"
                    layout="total, prev, pager, next"
                    :total="pageNum"
                    :page-size="pageSize"
                    :current-page="cur_page">
                </el-pagination>
            </div>
        </div>

        <!-- 弹出框 -->
        <el-dialog :title="storeTitle" :visible.sync="addStoreDialog" width="500px">
            <el-form ref="form" :model="form"  label-width="100px">
                <el-form-item label="门店名称：">
                    <el-input v-model="form.shopName"></el-input>
                </el-form-item>
                <el-form-item label="门店地址：">
                    <el-input v-model="form.shopAddress"></el-input>
                </el-form-item>
                <el-form-item label="门店定位：">

                </el-form-item>
                <el-form-item label="经度：">
                    <el-input v-model="form.longitude"></el-input>
                </el-form-item>
                <el-form-item label="纬度：">
                    <el-input v-model="form.latitude"></el-input>
                </el-form-item>
                <el-form-item label="所在省：">
                    <el-select v-model="select_province" class="handle-select mr10" placeholder="省"  @change="getProvinceList">
                        <el-option v-for="(item,key) in provinceData" :key="key" :value="item.shortName" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在市：">
                    <el-select v-model="select_city" class="handle-select mr10" placeholder="市" @focus="getcityList">
                        <el-option v-for="(item,key) in cityData" :key="key" :value="item.shortName"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <el-tabs type="border-card" @tab-click="serviceItemFn($event)" v-if="ifServer" >
                <el-tab-pane v-for="item in serviceItem" :key="item.id"  class="itemList">
                    <span slot="label" :dataId="item.id">{{item.serviceItemGroupName}}</span>
                    <el-checkbox-group v-model="bandStore" @change="selectStoreFn">
                        <el-checkbox-button class="bandStore" v-for="store in serviceItem_list" :label="store.id" :key="store.id">{{store.name}}</el-checkbox-button>
                    </el-checkbox-group>
                </el-tab-pane>

                <el-button type="success" @click="ShelfFn()"><i class="el-icon-plus"></i>上架</el-button>
            </el-tabs>


            <span slot="footer" class="dialog-footer">
                <el-button @click="addStoreDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        provinceList,
        storeAsGet,
        storeAsPost,
        storeAsPut
    } from '../api/api';
    import {tool_confirm} from '../tool/tool'
    export default {
        data() {
            return {
                //省
                provinceData: [],
                select_province: '',
                select_province_id: '',
                //市
                cityData: [],
                select_city: '',
                select_city_id: '',
                bandStore:[],
                storeTitle:'',
                addStoreDialog:false,
                tableData: [],
                ifEdit:false,
                ifServer:false,
                delVisible:false,
                cur_page: 0,
                pageSize: 10,
                storeId:null,
                pageNum: null,
                multipleSelection: [],
                is_search: false,
                serviceItem: null,
                serviceItemId: null,
                serviceItem_list: null,
                storeArr: [],
                form: {
                    id: '',
                    shopName: '',
                    shopAddress: '',
                    status: 'NORMAL',
                    longitude: '',
                    latitude: '',
                    province: '',
                    city: '',
                },
                form2: {
                    id: '',
                    shopName: '',
                    shopAddress: '',
                    status: 'NORMAL',
                    longitude: '',
                    latitude: '',
                    province: '',
                    city: '',
                },
                list:[],
                activeShow: true,
            }
        },
        created() {
            this.getStoreList(this.cur_page);
            this.getServerItem();
            this.getProvinceList();
        },
        computed: {
        },
        methods: {
            //省
            getProvinceList(){
                provinceList().then(res => {
                    console.log(res)
                    this.provinceData = res.data.content.districtList;
                    // this.select_city = '';
                    res.data.content.districtList.map(item=>{
                        if(item.shortName == this.select_province){
                            this.select_province_id = item.id;
                            this.getcityList();
                        }
                    })
                });
            },
            //市
            getcityList(){
                storeAsGet('/global/basicdata/getAllCityListByProviceId?provinceId='+this.select_province_id).then(res => {
                    // console.log(res,"id")
                    this.cityData = res.data.content.districtList;
                    this.select_city = this.cityData[0].shortName;
                    this.select_city_id = this.cityData[0].id;
                    res.data.content.districtList.map(item=>{
                        if(item.shortName == this.select_city){
                            this.select_city_id = item.id
                        }
                    })
                }).catch(errors=>{
                    this.$message.error(errors.response.data.detail)
                });
            },

            getStoreList(curPage){//获取门店列表
                this.activeShow = false;
                this.$nextTick(function () {
                    this.activeShow = true;
                })
                storeAsGet('/shop/all/page?page='+curPage+'&size='+this.pageSize).then(res => {
                    console.log(res)
                    this.pageNum = res.data.content.page.totalElements;
                    this.list = res.data.content.page.content;
                    this.list.forEach((val)=>{
                        if(val.status === 'NORMAL'){
                            val.fettle = '营业'
                        }else{
                            val.fettle = '停业'
                        }
                    });
                }).catch(errors=>{
                    this.$message.error(errors.response.data.detail)
                });
            },
            statusFn(e,val){//获取门店状态
                console.log(val.status)
                let status = val.status;
                tool_confirm(this,'是否要修改状态？').then(res => {
                    status === 'NORMAL' ?  status = 'DISABLED' : status = 'NORMAL';
                    storeAsPut('/shop/status?shopId='+val.id+'&status='+status+'').then(res => {
                        console.log(res)
                        this.getStoreList(this.cur_page-1)
                    })
                }).catch(() => {
                    console.log('取消')
                });

            },
            editFn(e,val){//修改门店状态
                this.ifEdit = 1;
                this.storeTitle='修改门店';
                this.storeId = val.id;
                this.ifServer = 1;
                let that = this;
                this.bandStore = [];
                storeAsGet('/shop?id='+val.id).then(res => {
                    this.form = res.data.content.entity;
                    console.log(res.data.content.entity,"res.data.content.entity")
                    this.select_province = res.data.content.entity.province;
                    this.select_city = res.data.content.entity.city;
                    this.addStoreDialog = true;
                    // console.log(res)
                    // console.log(this.form.id)
                    this.getServerItem();
                    storeAsGet('/shop/serviceItem/relation/shopId?shopId='+this.form.id).then(res=>{
                        console.log(res)
                        Array.prototype.slice.call(res.data.content.shopServiceItemRelations).forEach((value, index)=>{
                            that.bandStore.push(value.serviceItem.id)
                        })
                    }).catch(errors=>{
                        this.$message.error(errors.response.data.detail)
                    })
                }).catch(errors=>{
                    this.$message.error(errors.response.data.detail)
                });

            },
            serviceItemFn(e){//获取当前项目下内容列表
                this.serviceItemId = e.$vnode.key;
                this.getServerInfoItem(this.serviceItemId)
            },
            getServerItem(){//获取服务栏目
                storeAsGet('serviceItem/group/all/status?direction=DESC&propertys=serviceItemGroupName&status=NORMAL').then(res =>{
                    console.log(res)
                    this.serviceItem = res.data.content.list;
                    this.serviceItemId = this.serviceItem[0].id;
                    this.getServerInfoItem(this.serviceItem[0].id)
                }).catch(errors=>{
                    this.$message.error(errors.response.data.detail)
                })
            },
            getServerInfoItem(id){
                storeAsGet('serviceItem/group/status?groupId='+id+'&status=NORMAL').then(res=>{
                    this.serviceItem_list = res.data.content.list;
                }).catch(errors=>{
                    this.$message.error(errors.response.data.detail)
                });
                storeAsGet('shop/serviceItem/relation/shopId?shopId='+id).then(res=>{
                }).catch(errors=>{
                    this.$message.error(errors.response.data.detail)
                })
            },
            // 分页导航
            handleCurrentChange(val) {
                console.log(val)
                this.cur_page = val;
                this.getStoreList(val-1)
            },
            addStore(){//添加门店
                this.ifEdit = 0;
                this.ifServer = 0;
                this.storeTitle='添加门店';
                this.form = {};
                this.addStoreDialog = true
                this.select_province = '';
                this.select_city = '';

            },
            selectStoreFn(arr){//上下架
                this.bandStore = arr;
            },
            ShelfFn(){//上下架按钮
                storeAsPost(this.bandStore,'shop/serviceItem/relation/multiple?shopId='+ this.form.id).then(res=>{
                    console.log(res,1122333)
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val){
                console.log(val,111111)
            },
            formatterName(row, column, cellValue){

                console.log(cellValue)
            },

            formatter(row, column) {
                return row.address;
            },
            filterTag(value, row) {
                return row.tag === value;
            },
            saveEdit() {// 保存编辑
                if(this.form.shopName == ''){
                    this.$message.error("门店名称不可为空");
                    return false;
                }else if(this.form.shopAddress == ''){
                    this.$message.error("门店地址不可为空");
                    return false;
                }else if(this.form.longitude == ''){
                    this.$message.error("经度不可为空");
                    return false;
                }else if(this.form.latitude == ''){
                    this.$message.error("纬度不可为空");
                    return false;
                }else if(this.select_province == ''){
                    this.$message.error("省份不可为空");
                    return false;
                }else if(this.select_city == ''){
                    this.$message.error("城市不可为空");
                    return false;
                }
                this.form.province = this.select_province;
                this.form.city = this.select_city;
                console.log(this.form,"this.form");
                if(this.ifEdit){
                    storeAsPut('/shop/room/position',this.form).then(res=>{
                        this.getStoreList(this.cur_page);
                        this.addStoreDialog = false;
                    }).catch(errors=>{
                        this.$message.error(errors.response.data.detail)
                    });
                    this.$message.success(`修改成功`);
                }else{
                    console.log(this.form,"this.form")
                    storeAsPost(this.form,'shop/room/position').then(res=>{
                        this.getStoreList(this.cur_page);
                        this.addStoreDialog = false
                    }).catch(errors=>{
                        this.$message.error(errors.response.data.detail)
                    });
                    this.$message.success(`添加成功`);
                }
            },
            // 确定删除
            deleteRow(){
                this.tableData.splice(this.idx, 1);
                this.$message.success('删除成功');
            }
        }
    }

</script>

<style scoped>
    .store{
        position: relative;
    }
    .store .store_title{
        height: 40px;
    }
    .store .store_title div{
        line-height: 40px;
    }
    .store .mainBtn{
        position: absolute;
        right: 0;
        top:0

    }
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
</style>
